/**
* 测肤结果自定义分数产品关联修改表单
* @author Zeon scplay@gmail.com
* @date 2019/3/29
* @copyright Created by Panxsoft.
*/
<style lang="less" rel="stylesheet/less" type="text/less" scoped>
  .ivu-form-item-content {

        .product_thumb {
          width: 50px;
          vertical-align: middle;
        }
  }
</style>
<template>
	<Form
		ref="formValidate"
		:model="formValidate"
		:rules="ruleValidate"
		:label-width="80"
		class="v-customer-custom-recommend-value-edit">

		<!-- hm 需要选择身体部位 -->
		<Form-item

			:label="$t('product.body_positions')"
			required

		><!-- :placeholder="$t('common.please_select',{'field':$t('product.body_positions')})" -->
			<Select
				v-model="formValidate.position_id"
				placeholder="请选择身体部分"
				filterable
				size="large"
				transfer>
				<Option
					v-for="position in hm_positions"
					:value="position.position_id"
					:key="`skin_hm_pos_select[${position.position_id}]`">{{ position.position_name }}</Option>
			</Select>
		</Form-item>

		<!-- 检测项目 -->
		<Form-item

			:label="$t('test_product_label.select_skin')"
			required
			prop="position_id"
		>
			<Select
				v-model="formValidate.item_id"
				:placeholder="$t('common.please_select',{'field':$t('test_product_label.select_skin')})"
				filterable
				size="large"
				transfer>
				<Option
					v-for="item in hm_positions[formValidate.position_id-1].suggest_by_position"
					:value="item.item_id"
					:key="`skin_item_select[${item.item_id}]`">{{ item.item_name }}</Option>
			</Select>
		</Form-item>


		<!-- 分数区间 -->
		<!-- <Form-item
          :label="$t('custom_recommend_value.value_range')"
          required
          prop="item_id"
        >
          <Slider v-model="formValidate.value_range" range></Slider>
        </Form-item> -->

		<Form-item

			:label="$t('选择程度')"
			required
			prop="item_id"
		>
			<Select
				v-model="formValidate.level_sort"
				placeholder="请选择程度"
				filterable
				size="large"
				transfer>
				<Option
					v-for="score in hm_positions[formValidate.position_id-1].suggest_by_position[formValidate.item_id-1].suggest_by_item"
					:value="score.customer_relate_hm_skin.level_sort"
					:key="`skin_hm_pos_select[${score.id}]`">{{ score.title }}</Option>
			</Select>
		</Form-item>


		<!-- 选商品 -->
		<Form-item
			:label="$t('商品')"
			required

		>
			<!-- prop="product_ids" -->
			<Select
				v-model="formValidate.product_ids"
				name="create__recommend_product_id"
				multiple
				filterable
				size="large"
			>
				<Option
					v-for="product in products"
					:value="product.id"
					:key="'recommend_relate_product' + product.id"
					:label="product.name"
					style="height:65px"
				>
					<img
						:src="product.thumb_url"
						class="product_thumb">
					<span style="line-height:35px">{{ product.name }}</span>
					<span>{{ product.title }}</span>
				</Option>
			</Select>
		</Form-item>


		<Form-item>
			<Button
				type="primary"
				@click="handleSubmit('formValidate')">
				{{ this.$t('更新') }}
			</Button>
		</Form-item>

	</Form>
</template>

<script>

export default {
	name: 'CustomRecommendValueCreate',
	props: {
		// hairDetail: {
		// 	type: Object,
		// 	default() {
		// 		return {};
		// 	},
		// },
		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
		edit_data: {

			default() {
				return [];
			},
		},
		hm_positions: {
			type: Array,
			default() {
				return [];
			},
		},
		products: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {
			formValidate: { // 表单数据
				name: '',
				position_id: 1,
				item_id: 1,
				level_sort: '',
				product_ids: [],
			},

			ruleValidate: { // 验证规则

			},

		};
	},
	watch: {
	},
	created() {
		this.edit_data.products.forEach((item) => {
			console.log(item.id);
				 			this.formValidate.product_ids.push(item.id);
		});
		console.log(this.edit_data);

		this.formValidate.position_id = this.edit_data.position_id;
		this.formValidate.item_id = this.edit_data.item_id;
		this.formValidate.level_sort = this.edit_data.level_sort;
		// this.formValidate.product_ids = this.edit_data.products;
	},
	methods: {
		/**
     * 提交更新表单
     * @param  {string} name {表单的ref}
     * @return {undefined}
     */
		handleSubmit(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.updateProduct();
				} else {
					this.$Message.error(this.$t('common.exist_empty_field'));
				}
			});
		},

		/**
     * 更新素材
     * @return {undefined}
     */
		updateProduct() {
			// form_data为要传的参数，是update接口的请求参数
			const form_data = {
				skin_type: 'CustomerRelateHmSkin',
				hm_skin: {
					position_id: this.formValidate.position_id,
					item_id: this.formValidate.item_id,
					level_sort: this.formValidate.level_sort,
				},
				products: this.formValidate.product_ids,
				_method: 'PUT',

			};


			this.$emit('update', this.edit_data.id, form_data);
		},

		/**
     * 手动拼接formdata数据
     * @return {Object}
     */
		formDataCreate() {


		},

	},
};
</script>
